<template>
    <div>
        <city-header></city-header>
        <city-search :cities="cities"></city-search>
        <city-list :cities="cities" :hot="hotCities" :letter="letter"></city-list>
        <city-alphabet :cities="cities" @change="handleLetterChange"></city-alphabet>
    </div>
</template>
<script>
import axios from 'axios'
import CityHeader from '../components/CityHeader'
import CitySearch from '../components/CitySearch'
import CityList from '../components/CityList'
import CityAlphabet from '../components/Alphabet'
export default {
    name:'',
    components:{
        CityHeader,
        CitySearch,
        CityList,
        CityAlphabet
    },
    data(){
        return {
            cities:{},
            hotCities:[],
            letter:''
        }
    },
    mounted(){
        this._getCityInfo()
    },
    methods:{
        _getCityInfo(){
            axios.get('/api/city').then((res)=>{
                if(!res.data.data.errno && res.data.data.data){
                    const data = res.data.data.data
                    this.cities = data.cities 
                    this.hotCities = data.hotCities
                    
                }
            })
        },
        handleLetterChange(e){
            this.letter  = e
        }
    }
}
</script>
<style lang="stylus" scoped>

</style>